<template>
	<view class="content">
		<view class="header">
			<!-- 考研时间 -->
			<view class="kaoyan" v-if="kaoyaoShow">
				<view>
					考研时间：{{kaoyan_time}}
				</view>
				<view>
					倒计时：{{downTime}}天
				</view>
			</view>
			<!-- 坚持天数、正确率-->
			<view class="mainpadding  border" v-if="isShow">
				<view class="flexbetween aside border">
					<view class="flexleft" @click="goTiime">
						<view class="">
							<image src="../../static/image/erkai/red.png" mode="" class="red"></image>
						</view>
						<view class="margin_left" style="text-align: center;">
							<view class="">坚持天数</view>
							<view class="margin_tb num">{{info.tm_day}}</view>
							<view class=" size_red">排名：{{info.day_paihang}}</view>
						</view>
					</view>
					<view class="" style="border-right: 1rpx solid RGBA(226, 226, 226, 1); height: 100rpx;"></view>
					<view class="flexleft" @click="goTiime">
						<view class="">
							<image src="../../static/image/erkai/green.png" mode="" class="red"></image>
						</view>
						<view class="margin_left" style="text-align: center;">
							<view class="">正确率</view>
							<view class="margin_tb num">{{info.zqlv}}%</view>
							<view class="size_red">排名：{{info.true_paiming}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding">
			<u-swiper :list="lbt" keyName="thumb_image" indicator indicatorMode="line" mode="heightFix" circular
				@click="lbtclick" height="387rpx">
			</u-swiper>
		</view>
		<!-- 二开背诵，练习，复习，乱序模式 -->
		<view class="lable-box mainpadding">
			<view class="flexcolumn" @click="jumpurl('/pages/homepage/xuanzefenlei?type=1')">
				<!-- <view class="flexcolumn"  @click="jumpurl('/pages/homepage/tingke')" v-if="flag"> -->
				<view class="image">
					<image src="/static/image/erkai/beisong.png" mode=""></image>
				</view>
			</view>
			<view class="flexcolumn" @click="jumpurl('/pages/homepage/xuanzefenlei?type=2')">
				<view class="image">
					<image src="/static/image/erkai/lianxi.png" mode=""></image>
				</view>
			</view>
			<view class="flexcolumn" @click="jumpurl('/pages/homepage/xuanzefenlei?type=4')">
				<view class="image">
					<image src="/static/image/erkai/fuxi.png" mode=""></image>
				</view>
			</view>
			<view class="flexcolumn" @click="jumpurl('/pages/homepage/xuanzefenlei?type=3')">
				<view class="image">
					<image src="/static/image/erkai/luanxu.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- <view class="strongtext mainpadding">
			当前运行环境为测试环境，版本号为：“{{versionnum}}”。
			当前后台返回的值是：{{flag}},前台取反值判断当flag为false时只会展示刷题内容，当为true是才全部展示
		</view> -->
		<!-- 如果是线上版本的话内容存在课程，资料，刷题 -->
		<view class="flexcenter margin_top" v-if="flag">
			<!-- tabs分页 -->
			<u-tabs :list="tags" lineColor="#DCB490" :current="current"
				:activeStyle="{color: '#333333',fontWeight: 'bold',transform: 'scale(1.05)'}"
				:inactiveStyle="{color: '#333333',fontWeight: '400',transform: 'scale(1)'}"
				itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;" @click="clicktab"></u-tabs>
		</view>
		<!-- 审核版本只展示刷题 -->
		<view class="flexcenter margin_top" v-if="!flag">
			<!-- tabs分页 -->
			<u-tabs :list="tagstwo" lineColor="#DCB490"
				:activeStyle="{color: '#333333',fontWeight: 'bold',transform: 'scale(1.05)'}"
				:inactiveStyle="{color: '#333333',fontWeight: '400',transform: 'scale(1)'}"
				itemStyle="padding-left: 30px; padding-right: 30px; height: 34px;"></u-tabs>
		</view>
		<view class="mainpadding2 flexbetween flex_wrap">
			<view class="margin_top box_shado radius" v-for="item in list.data" :key="item.id"
				@click="jumpdetail(item)">
				<view class="topimage radius">
					<image :src="item.thumb_image" mode=""></image>
				</view>
				<view class="mainpadding">
					<view class="strongtext titlewrop">{{item.name}}</view>
					<!-- 线上版本 -->
					<view class="flexbetween margin_top" v-if="flag">
						<view class="lableprice" v-show="current==0">￥{{item.goods_price}}</view>
						<view class="lableprice" v-show="current==1">
							￥{{item.goods_price}}/{{item.days}}{{item.unit==1?"天":item.unit==2?"周":item.unit==3?"月":"年"}}
						</view>
						<view class="lableprice" v-show="current==2">￥{{item.salesprice}}</view>
						<!-- 资料 -->
						<!-- <view class="smalltext" v-show="current==0">已售：{{item.actual_num}}件</view> -->
						<view class="smalltext" v-show="current==0">已售：{{item.salesnum}}件</view>
						<!-- 刷题，课程 -->
						<view class="smalltext" v-show="current==2||current==1">已售：{{item.total_num}}件</view>
					</view>
					<!-- 审核版本 -->
					<view class="flexbetween margin_top" v-if="!flag">
						<view class="lableprice">
							￥{{item.goods_price}}/{{item.days}}{{item.unit==1?"天":item.unit==2?"周":item.unit==3?"月":"年"}}
						</view>
						<view class="smalltext">已售：{{item.total_num}}件</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				lbt: [],
				// tags数据
				tags: [{
						name: '资料',
					}, {
						name: '刷题',
					},
					/* {
						name: '课程'
					}, */
				],
				tagstwo: [{
					name: '刷题',
				}],
				current: 0,
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				versionnum: "",
				flag: false, //发布版本false线上版本true
				info: {}, //个人信息
				isShow: false,
				kaoyan_time: "", //考研时间
				downTime: "", //倒计时时间
				kaoyaoShow: false
			}
		},
		onLoad() {
			this.banner()
			this.getTime()
			// uni.getSystemInfo({
			// 	success:function(res){
			// 		console.log(res,"系统信息")
			// 	}
			// })
			const accountinfo = wx.getAccountInfoSync()
			this.versionnum = accountinfo.miniProgram.version
			this.getversion()
			// 微信小程序分享
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		onShow() {
			this.getuserInfo()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '文博企划君', //分享的名称
				path: '/pages/homepage/homepage',
				mpId: 'wx73a5840586d418ee' //此处配置微信小程序的AppId
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '文博企划君',
				type: 0,
				summary: "",
			}
		},
		methods: {
			//获取个人信息
			getuserInfo() {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					// httpRequest.doLogin();
					return false;
				}
				let _this = this;
				httpRequest.request('/api/user/index', 'POST', {}).then(res => {
					if (res.code == 1) {
						_this.info = res.data.userinfo
						this.isShow = true
					}
				})
			},
			getDownTime(dateTime) {
				// 指定日期和时间
				let EndTime = new Date(dateTime);
				// 当前系统时间
				let NowTime = new Date();
				let time = EndTime.getTime() - NowTime.getTime();
				return Math.floor(time / 1000 / 60 / 60 / 24)
			},
			getTime() {
				httpRequest.request('/api/banner/kefu', 'POST', {}).then(res => {
					if (res.code == 1) {
						this.kaoyan_time = res.data.kaoyan_time
						this.downTime = this.getDownTime(this.kaoyan_time)
						this.kaoyaoShow = true
					}
				})
			},
			goTiime() {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: './shijianpaihang'
				})
			},
			getversion() {
				httpRequest.request('/api/common/version', 'POST', {
					version: "1.1.0"
				}).then(res => {
					// this.flag = res.data.boolean
					this.flag = !res.data.boolean
					this.init()
					// console.log(this.flag,999)
				})
			},
			init(isPage, page) {
				let _this = this
				let url = ""
				if (this.flag) {
					if (_this.current == 0) {
						url = "/api/goods/goods_lists"
					} else if (_this.current == 1) {
						url = "/api/package/lists"
					} else if (_this.current == 2) {
						url = "/api/course/lists"
					}
				} else {
					url = "/api/package/lists"
				}
				httpRequest.request(url, 'GET', {
					page: page || 1,
					pagesize: _this.limit
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 获取轮播图数据
			banner() {
				httpRequest.request('/api/banner/banners', 'GET', {
					group: 'index'
				}).then(resp => {
					this.lbt = resp.data
				})
			},
			// 轮播图点击
			lbtclick(index) {

				uni.navigateTo({
					url: '/pages/webview/webview?url=' + this.lbt[index].minapp_url
					// page.json定义的路径 传url 到webview界面去接收 实现跳转
				})
				// 获取当前点击轮播图下标
				// console.log(index)
			},
			// tabs点击
			clicktab(e) {
				this.current = e.index
				this.init()
			},
			// 跳转详情

			jumpdetail(item) {
				if (this.flag) {
					if (this.current == 0) {
						uni.navigateTo({ //资料
							url: "/pages/mercharts/shujixq?id=" + item.id
						})
					} else if (this.current == 1) {
						uni.navigateTo({ //刷题
							url: "/pages/mercharts/goumaisc?id=" + item.id
						})
					} else {
						uni.navigateTo({ //课程
							url: "/pages/homepage/kecheng?id=" + item.id
						})
					}
				} else {
					console.log(111)
					uni.navigateTo({ //刷题
						url: "/pages/mercharts/goumaisc?id=" + item.id
					})
				}

			},
			jumpurl(url) {
				// 如果用户未登录点击去登陆
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #FAFAFA;
	}

	.header {
		margin: 30rpx;
		background-color: #fff;
	}

	.kaoyan {
		display: flex;
		justify-content: space-between;
		background-color: #DCB490;
		border-radius: 20rpx 20rpx 0 0;
		padding: 20rpx 30rpx;
		color: #fff;
		font-size: 26rpx;
	}

	.aside {
		padding: 30rpx;
		// background-color: RGBA(248, 250, 253, 1);
		background-color: #fff;
	}

	.red {
		width: 61rpx;
		height: 61rpx;
	}

	.lable-box {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.image {
		width: 169rpx;
		height: 180rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>